<template>
    <div class="register-layout">
        <div class="register">
            <el-form
                ref="registerFormRef"
                style="max-width: 600px"
                :model="registerForm"
                :rules="registerRules"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
            >
                <el-form-item label="用户名" prop="registerName">
                    <el-input v-model="registerForm.registerName" />
                </el-form-item>
                <el-form-item label="密码" prop="registerPassword">
                    <el-input v-model="registerForm.registerPassword" type="password" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="registerForm.confirmPassword" type="password" />
                </el-form-item>
                <el-form-item style="margin-left: 150px;">
                    <el-button type="primary" @click="registerUser(registerFormRef)">
                        注册
                    </el-button>
                    <el-button @click="resetRegisterForm(registerFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style scoped>
.register-layout{
    background: url(../../assets/20200822150813_suqlh.jpeg)
    no-repeat center;
    height: 100%;
    width: 100%;
    background-size: cover;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
}
.register{
    width: 400px;
    height: 250px;
    text-align: center;
    margin-top: 400px;
    margin-left: 200px;
}
</style>
<script>
import { reactive } from 'vue';
import { ElForm } from 'element-plus';

import axios from 'axios';
export default {
    components: {
        ElForm
    },
    data() {
        return {
            formSize: 'default',
            registerForm: reactive({
                registerName: '',
                registerPassword: '',
                confirmPassword: ''
            }),
            registerRules: {
                registerName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度要在3-10', trigger: 'blur' }
                ],
                registerPassword: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度要在3-10', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value === this.registerForm.registerPassword) {
                                callback();
                            } else {
                                callback(new Error('两次输入密码不一致'));
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            },
            registerFormRef: null,
            userlist: []
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.registerFormRef = this.$refs.registerFormRef;
        });
        axios.get('users.json').then(res => {
            this.userlist = res.data.userslist;
        });
    },
    methods: {
        async registerUser(registerFormRef) {
            if (!registerFormRef) return;
            await registerFormRef.validate((valid, fields) => {
                if (valid) {
                    // 模拟将新用户信息添加到用户列表（实际中应通过接口发送到服务器保存）
                    this.userlist.push({
                        name: this.registerForm.registerName,
                        password: this.registerForm.registerPassword
                    });
                    // 注册成功提示，可以进一步优化提示方式，如弹出模态框等
                    alert('注册成功');
                    // 清空注册表单内容
                    registerFormRef.resetFields();
                } else {
                    console.log('error register!', fields);
                }
            });
        },
        resetRegisterForm(registerFormRef) {
            if (!registerFormRef) return;
            registerFormRef.resetFields();
        }
    }
};
</script>